<template>
  <div class="blueFoxLockMain">
    <div class="light lightBounces"></div>
    <div class="blueFox"></div>
    <div class="lottie" @touchend="blueFoxTouch">
      <lottie class="collect" :options="defaultOptions" :width="width" :height="width"
        v-on:animCreated="handleAnimation" />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import locklottie from "../../../assets/locklottie.json"
export default {
  data() {
    return {
      defaultOptions: { animationData: locklottie, loop: true, autoplay: true },
      anim: {},
      width: parseFloat(
        getComputedStyle(window.document.documentElement)["font-size"]
      ) * 20
    }
  },
  mounted() {
    setTimeout(() => {
      this.updateDockList({
        position: "unshift",
        arr: {
          state: "blueFox",
          case: []
        }
      })
    }, 1000)
    setTimeout(() => {
      this.setBlueFoxLockShow(false)
    }, 10000)
    const json = {
      deviceUuid: this.deviceUuid,
      picbookId: this.picbookIndex.id
    }
    this.$post(this.api.blueFoxCollect, json).then(
      res => {
        this.setCollectBlueFox()
      }
    )
  },
  computed: {
    ...mapGetters("picbookListStatus", {
      picbookIndex: "getPicbookIndex"
    })
  },
  methods: {
    handleAnimation: function (anim) {
      this.anim = anim
      this.anim.setSpeed(1.5)
    },
    blueFoxTouch: function () {
      this.setBlueFoxLockShow(false)
    },
    ...mapActions("blueFoxStatus", ["setBlueFoxLockShow", "setCollectBlueFox"]),
    ...mapActions("dockListStatus", ["updateDockList"])
  }
};
</script>

<style scoped lang='stylus'>
.blueFoxLockMain
  position fixed
  background rgba(0, 0, 0, 0.5)
  width 100%
  height 100%
  z-index 99
  .light
    background url($urlTitle + 'index/light.png') 0 0 / 100% 100%
    position absolute
    $center('WHLT', 28rem, 28rem)
    z-index 98
  .blueFox
    background url($urlTitle + 'index/blueFoxLock.png') 0 0 / 100% 100%
    position absolute
    $center('WHLT', 12rem, 20rem)
    z-index 99
  .lottie
    position absolute
    $center('WHL_B', 20rem, 20rem, 0rem)
    z-index 99
    .collect
      position absolute
      bottom 0
</style>
